<template>
    <div>
		<div class="my-1">
			<Button type="success" @click="add">添加类型</Button>
		</div>
		<Table border :columns="columns12" :data="typeList">
		    <template slot-scope="{ row }" slot="name">
		        <strong>{{ row.name }}</strong>
		    </template>
		    <template slot-scope="{ row, index }" slot="action">
		        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
		        <Poptip
				   confirm
				   placement="left"
				   title="是否删除?"
				   @on-ok="dels(row)">
				  <Button type="error" size="small" >删除</Button>
		        </Poptip>
		    </template>
		</Table>
		<!-- 对话框 -->
		 <Modal
		   v-model="showModel"
		   title="类型操作"
		   @on-ok="isOk"
		   @on-cancel="cancel">
		  <Form :model="formData" label-position="left" :label-width="100">
			  <FormItem label="id" v-show="isEdit">
			  		<Input v-model="formData.id" disabled></Input>
			  </FormItem>
			  <FormItem label="类型名称">
				  <Input v-model="formData.type"></Input>
			  </FormItem>
		  </Form>
		</Modal>
		<div class="mt-5 w_100 flex justify-center">
			 <Page :total="total" show-sizer @on-change="getData" @on-page-size-change="getList"
			 :page-size-opts="[2, 5, 10]"/>
		</div>
	</div>
</template>
<script>
	import {add,list,update,del} from '../api/type.js'
    export default {
        data () {
            return {
                columns12: [
                  {
                  	type: 'index',
                  	width: 60,
                  	align: 'center'
                  },
                    {
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: '类型名称',
                        key: 'typeName'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
               typeList:[],//类型数据
			   total:1,
			   limit:10,
			   isEdit:false,
			   showModel:false,
			   formData:{
				   id:'',
				   type:''
			   }
			   
            }
        },
		created() {
			this.getData()
		},
        methods: {
			async getData(num){
				let par = new URLSearchParams()
				par.append("pageNum",num?num:1)
				par.append("limit",this.limit)
				let res = await list(par)
				this.total = res.data.data.count
				this.typeList = res.data.data.list
			},
			async getList(num){
				this.limit = num;
				this.getData()
			},
			prev(){
				console.log("shangyiye")
			},
			add(){
				this.showModel=true
				this.isEdit=false
				this.formData.type=''
			},
			async isOk(){
				let par = new URLSearchParams()
				par.append("typeName",this.formData.type)
				let res ;
				if(this.isEdit){
					par.append("id",this.formData.id)
					res = await update(par)
				}else{
					res = await add(par)
				}
				console.log("--------<>",res)
				this.getData()
				this.$Message.success("操作成功")
			},
			async dels(row){
				let par = new URLSearchParams()
				par.append("id",row.id)
				let res = await del(par)
				this.$Message.success("删除成功")
				this.getData()
			},
			cancel(){
				
			},
            show (row) {
               this.showModel=true
			   this.isEdit=true
			   this.formData.id = row.id
			   this.formData.type = row.typeName
            },
            remove (row) {
                
            }
        }
    }
</script>
